<template>
    <div id="main-box">
<!--    <van-nav-bar-->
<!--            left-text="返回"-->
<!--            left-arrow-->
<!--            @click-left="onClickLeft"-->
<!--    />-->
        <div class="bar">
        <van-row>
            <van-col span="4"> <div style="margin-left:10px;margin-top:10px"><van-icon name="arrow-left" color="white" @click="back()" /> </div></van-col>
        </van-row>
        </div>
        <div class="payStatus">
            <!--状态-->
            <div>
            <van-row>
                <van-col span="2" offset="9"><div style="margin-top:10px"><van-icon name="passed" color="white" /></div></van-col>
                <van-col span="6">
                    <div style="color: white;font-weight: bold;margin-top:10px" v-show="paySuccess">支付成功</div>
                    <div  style="color: white;font-weight: bold;margin-top:10px" v-show="payStatus">支付失败</div>
                </van-col>
            </van-row>
            </div>
            <!--按钮-->
            <div style="margin-top:10px;">
            <van-row>
                <van-col span="6" offset="7">  <van-button color="white"  plain hairline  round  size="small" style="background-color:transparent;margin-bottom:10px" @click="backHome()">返回首页</van-button></van-col>
                <van-col span="6"> <van-button  plain hairline color="red"  round  size="small"  style="background-color:rgb(255,255,107)" @click="backOrder()">查看订单</van-button></van-col>
            </van-row>
            </div>
            <!--优惠券-->
            <div v-show="coupShow" style="margin-top:15px;">
            <van-row type="flex" justify="space-around">
                <template v-for="(item,i) in coup">
                <van-col span="11" :key="i">
                    <div class="coup" style="font-size:10px;text-align: center">
                        <div>
                            <van-icon name="gift-card-o" size="30" />
                        </div>
                        <div>
                            {{item.name}}
                        </div>
                        <div>
                            满{{item.withAmount}}减{{item.usedAmount}}
                        </div>
<!--                        <div>-->
<!--                           {{item.txt}}-->
<!--                        </div>-->
                    <div style="margin-top:5px">

                        <van-button  plain hairline color="white"  round  size="mini"  style="width:50px;background-color:rgb(254,78,17)" @click="getCoup(item.id)">领取</van-button>
                    </div>
                </div>
                </van-col>
                </template>
<!--                <van-col span="11">-->

<!--                    <div class="coup">-->
<!--                    <div>-->
<!--                        <van-button  plain hairline color="white"  round  size="mini"  style="width:50px;background-color:rgb(254,78,17)">领取</van-button>-->
<!--                    </div>-->
<!--                </div>-->
<!--                </van-col>-->
            </van-row>
            </div>
        </div>
           <div style="margin-top: 20px">
               <van-row type="flex" justify="space-around">
                   <template v-for="(item,i) in goodsInfo.slice(0,10)" >
                       <van-col span="12" :key="i">
<!--                           <van-card-->
<!--                                   :price="item.price.toFixed(2)"-->
<!--                                   :title=item.title-->
<!--                                   :thumb="imgsrc+item.img"-->
<!--                                   @click="buy(item.id)">-->
<!--                           </van-card>-->
                           <van-card
                                   :price="item.price.toFixed(2)"
                                   :title=item.title
                                   :thumb="imgsrc+item.img"
                                        @click="buy(item.id)">
                                 </van-card>
                       </van-col>
                   </template>
               </van-row>
           </div>


    </div>
</template>

<script>
    import {getBigSalecoup, getIsHavecoup, getSelectUuid, goodsList, putCoup} from "@/api/api";
    import img from "@/api/api"
    import {Toast} from "vant";
    export default {
        name: "paySuccess",
        data(){
            return{
            goodsInfo:[
            ],
                imgsrc:img.src,
                coup:[],
                payStatus:false,
                paySuccess:true,
                coupShow:true,
            }
        },
        created() {
            console.log(this.$route.params.uuid)
            getSelectUuid(this.$route.params.uuid).then((response) => {
                if(response.data.data.code==2000){
                    console.log(11)
                }
            })
            goodsList().then((response) => {
                this.goodsInfo=response.data.data.goodList

            });
            getBigSalecoup(1).then((response) => {
                this.coup=response.data.data.coupons
            });
            if(this.$route.query.status==0){
                this.paySuccess=false
                this.payStatus=true
                this.coupShow=false
            }
        },
        methods: {
            getCoup(cid){
                getIsHavecoup(0).then((response) => {
                    if (response.data.data.results===0){
                        putCoup(cid).then((response) =>{
                            Toast('领取成功');
                        })
                    }
                    else{
                        Toast('账户里已经有该优惠券了');
                    }
                })
            },
            backHome(){
                this.$router.push({path:'/dashBoard/Home'})
            },
            backOrder(){
                this.$router.push({path:'/dashboard/mine/mineOrder'})
            },
            back() {
                this.$router.go(-1)
            },
            buy(gid){
                this.$router.push({path:'/goodDetail',
                        query:{
                            goodId:gid
                        }
                    },
                )
            },
        },
    }
</script>

<style scoped>
#main-box{
    height: 100%;
    width: 100%;
    background-color: white;
}
.bar{
    background-color:rgb(254,67,136);
}
.payStatus{
    width:100%;
    /*height:32%;*/
     background-color:rgb(254,67,136);
}
.coup{
    border:1px solid white;
    height:100px;
    background-color: white;
    border-radius:7px;
    margin-bottom: 10px;
}
</style>